BootStrap - Exibindo e escondendo conteúdos

Importante : Para estes recursos funcionarem é necessário adicionar o bootstrap css e js e o jquery.

Infelizmente a tradução não ficaria prática em muitos casos e acabei deixando em inglês mesmo.
Na transição o bootstrap aplica a classe .collapsing no controle e por esse motivo em todos exemplos do collapse ficam com o fundo amarelo antes de sumirem.

Colapse-Simpes-Simple Collapsible

O conteúdo abaixo esta escondido e é exibido ao clicar no botão e ao clicar novamente o conteúdo é escondido novamente.

A classe collapse esconde o conteúdo por default.

Como usar :

        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
        <div id="demo1" class="collapse">
             texto
        </div>

Como o browser exibe :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Show Collapsible

Neste caso o texto é exibido e ao clicar no botão ele é escondido. Ao clicar novamente no botão ele é exibido novamente.

A classe collapse com o parÃmetro show exibe o conteúdo por default.

Como usar :

        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo2">Show collapsible</button>
        <div id="demo2" class="collapse show">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>

Como o browser exibe :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Collapsing

Neste exemplo antes de executar o collapse do conteudo o bootstrap aplica a classe collapsing que faz um efeito com a cor de fundo amarela e a retira no final da transição.

Como usar :

        <button type="button" class="btn btn-primary collapsed" data-toggle="collapse" data-target="#demo3">Collapse com efeito</button>
        <div id="demo3" class="collapse">
            A classe .collapsing2 é adicionanda quando a transição inicia e removida quando termina. Neste exemplo o efeito é colocar uma cor de fundo. A cor de fundo é removida quando a transição termina.
        </div>

Como o browser exibe :

A classe .collapsing2 é adicionanda quando a transição inicia e removida quando termina. Neste exemplo o efeito é colocar uma cor de fundo. A cor de fundo é removida quando a transição termina.